<template>
	<view class="login">
		<view class="settle-header"></view>
		<view class="welcome">
			<text>欢迎使用</text>
		</view>
		<view class="form">
			<view class="sign-row">
				<input placeholder="请输入用户名/手机号" v-model="login" />
			</view>
			<view class="sign-row">
				<input type="password" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="toolbar">
				<checkbox-group @change="autoLoginChange">
					<label>
						<checkbox :checked="autoLogin" value="autoLogin" color="#2979ff" style="transform:scale(0.7)" />自动登录
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="submit-btn" @click="submit">登录</view>
		<view class="settle-footer"></view>
		<safe-area></safe-area>
	</view>
</template>

<script>
	import _ from "lodash";
	export default {
		data() {
			return {
				// 用户名
				login: '',
				// 密码
				password: '',
				// 自动登录
				autoLogin: true,
			}
		},
		onShow() {
			uni.hideHomeButton();
		},
		methods: {
			// 是否自动登录切换
			autoLoginChange(e) {
				this.autoLogin = e.detail.value.includes('autoLogin');
			},
			// 登录
			submit: _.debounce(function() {
				uni.showLoading({
					title: '登录中...',
				})
				this.$store.dispatch('login', {
					auto_login: this.autoLogin,
					params: {
						login: this.login,
						password: this.password,
					}
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: res,
					})
					uni.reLaunch({
						url: '/pages/index/index',
					})
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: err
					})
				});
			}, 300),
		},
	}
</script>

<style lang="scss" scoped>
	$row-width: 550rpx;

	.login {
		width: 100%;
		height: 100%;
		background-color: white;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		align-items: center;

		.settle-header {
			width: 100%;
			flex: 1;
		}

		.welcome {
			padding: 0 0 50rpx;
			font-size: 56rpx;
			color: #3F7CFB;
		}

		.form {
			margin: 50rpx 0;
			width: $row-width;

			.sign-row {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #dcdcdc;
				font-size: 32rpx;

				&:not(:first-child) {
					margin-top: 20rpx;
				}

				input {
					height: 100%;
				}
			}

			.toolbar {
				width: 100%;
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #8f939c;
			}
		}

		.submit-btn {
			margin-top: 50rpx;
			width: $row-width;
			height: 80rpx;
			border-radius: 10rpx;
			background-color: #3F7CFB;
			color: white;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;

			&:active {
				opacity: .7;
			}
		}

		.settle-footer {
			width: 100%;
			flex: 3;
		}
	}
</style>